import Link from "next/link";

export default function Footer() {
  return (
    <footer className="py-12 sm:py-16 lg:py-20 bg-sidebar border-t border-border/30">
      <div className="mx-auto max-w-6xl space-y-12 px-6 lg:px-12">
        <div className="grid gap-12 md:grid-cols-5">
          <div className="space-y-6 md:col-span-2">
            <Link aria-label="go home" className="block size-fit" href="/">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="450"
                height="104"
                viewBox="0 0 450 104"
                fill="none"
                className="h-5 w-auto text-[#1E1E1E] dark:text-white"
              >
                <title>Kaneo Logo</title>
                <path
                  d="M14.6855 95.7242C10.5716 96.5957 8.00007 95.2652 8 93.6608L8 62.026C8 61.8601 8.00321 61.6857 8.00879 61.5065C8.00391 61.3845 8.00098 61.2484 8.00098 61.0973L8.00098 29.944C8.01499 28.6519 8.25865 27.7436 11.2588 27.108L25.3145 24.276C29.4283 23.4046 31.9997 24.7352 32 26.3395L32 57.9742C32 58.1404 31.9978 58.3153 31.9922 58.4948C31.997 58.6165 31.999 58.7522 31.999 58.903L31.999 90.0573C31.9849 91.3489 31.7407 92.2568 28.7412 92.8922L14.6855 95.7242Z"
                  fill="#5463FF"
                />
                <path
                  d="M46.6855 87.7238C42.5716 88.5952 40 87.2647 40 85.6603L40 54.0265C40 53.8607 40.0032 53.6861 40.0088 53.507C40.0039 53.3849 40.001 53.2491 40.001 53.0978L40.001 21.9445C40.015 20.6526 40.2589 19.7451 43.2588 19.1096L57.3145 16.2765C61.4285 15.4051 64 16.7366 64 18.341L64 49.9748C64 50.141 63.9978 50.3157 63.9922 50.4953C63.997 50.617 63.999 50.7528 63.999 50.9035L63.999 82.0568C63.9849 83.3485 63.7408 84.2564 60.7412 84.8918L46.6855 87.7238Z"
                  fill="#5463FF"
                />
                <path
                  d="M89.3145 8.27576C93.4284 7.40433 95.9999 8.73485 96 10.3392V21.184L78.0576 44.5013L95.999 66.7797V74.057C95.9849 75.3486 95.7407 76.2565 92.7412 76.892L78.6855 79.725C74.572 80.5963 72.0005 79.2647 72 77.6605V46.0258C72 45.8599 72.0032 45.6853 72.0088 45.5062C72.0039 45.3844 72.001 45.248 72.001 45.097V13.9427C72.0151 12.6511 72.2594 11.7432 75.2588 11.1078L89.3145 8.27576Z"
                  fill="#5463FF"
                />
                <path
                  d="M413.776 80C408.324 80 403.571 78.8698 399.515 76.6094C395.46 74.2826 392.302 71.0249 390.041 66.8366C387.781 62.6482 386.651 57.7285 386.651 52.0775C386.651 46.4266 387.781 41.5401 390.041 37.4183C392.302 33.2299 395.46 29.9723 399.515 27.6454C403.571 25.3185 408.324 24.1551 413.776 24.1551C419.227 24.1551 423.981 25.3185 428.036 27.6454C432.091 29.9723 435.249 33.2299 437.51 37.4183C439.77 41.5401 440.9 46.4266 440.9 52.0775C440.9 57.7285 439.77 62.6482 437.51 66.8366C435.249 71.0249 432.091 74.2826 428.036 76.6094C423.981 78.8698 419.227 80 413.776 80ZM413.776 68.5318C417.499 68.5318 420.391 67.1025 422.451 64.2438C424.512 61.3186 425.543 57.2631 425.543 52.0775C425.543 46.8919 424.512 42.8698 422.451 40.0111C420.391 37.0858 417.499 35.6232 413.776 35.6232C410.053 35.6232 407.161 37.0858 405.1 40.0111C403.039 42.8698 402.008 46.8919 402.008 52.0775C402.008 57.2631 403.039 61.3186 405.1 64.2438C407.161 67.1025 410.053 68.5318 413.776 68.5318Z"
                  fill="currentColor"
                />
                <path
                  d="M354.17 80C348.719 80 343.965 78.8698 339.91 76.6094C335.921 74.2826 332.796 71.0249 330.536 66.8366C328.342 62.6482 327.245 57.7285 327.245 52.0775C327.245 46.4266 328.342 41.5401 330.536 37.4183C332.796 33.2299 335.921 29.9723 339.91 27.6454C343.899 25.3185 348.619 24.1551 354.07 24.1551C359.389 24.1551 364.009 25.3185 367.932 27.6454C371.854 29.9723 374.879 33.2964 377.007 37.6177C379.201 41.939 380.298 47.0914 380.298 53.0748V56.0665H342.702C342.901 60.3213 344.032 63.4792 346.093 65.5402C348.22 67.6011 351.012 68.6316 354.469 68.6316C356.996 68.6316 359.09 68.0997 360.752 67.036C362.48 65.9723 363.71 64.3435 364.442 62.1496L379.5 63.0471C378.104 68.3656 375.145 72.5208 370.624 75.5125C366.104 78.5042 360.619 80 354.17 80ZM342.702 46.8919H364.94C364.741 42.9695 363.644 40.0443 361.649 38.1163C359.721 36.1883 357.195 35.2244 354.07 35.2244C350.946 35.2244 348.353 36.2548 346.292 38.3158C344.298 40.3102 343.101 43.169 342.702 46.8919Z"
                  fill="currentColor"
                />
                <path
                  d="M270.654 79.8001V25.1781H284.144L284.744 41.1774L282.845 40.6679C283.378 36.5916 284.444 33.3306 286.043 30.8849C287.708 28.4391 289.774 26.6727 292.239 25.5857C294.704 24.4987 297.402 23.9552 300.333 23.9552C304.197 23.9552 307.462 24.8044 310.126 26.5029C312.858 28.2013 314.923 30.6131 316.322 33.7383C317.788 36.7955 318.521 40.4301 318.521 44.6423V79.8001H303.531V49.7376C303.531 46.8163 303.298 44.3366 302.831 42.2984C302.365 40.2603 301.532 38.7317 300.333 37.7126C299.134 36.6256 297.468 36.0821 295.337 36.0821C292.205 36.0821 289.807 37.271 288.142 39.6488C286.476 41.9587 285.643 45.3217 285.643 49.7376V79.8001H270.654Z"
                  fill="currentColor"
                />
                <path
                  d="M227.085 80C221.567 80 217.046 78.7368 213.523 76.2105C210.066 73.6177 208.337 70.0277 208.337 65.4404C208.337 60.7202 209.8 57.0969 212.725 54.5706C215.717 51.9778 220.104 50.0831 225.888 48.8864L243.141 45.4958C243.141 42.0388 242.343 39.446 240.747 37.7174C239.218 35.9224 236.991 35.0249 234.066 35.0249C231.207 35.0249 228.98 35.6897 227.384 37.0194C225.789 38.2825 224.758 40.1773 224.293 42.7036L209.235 42.0055C210.232 36.1551 212.858 31.734 217.113 28.7423C221.434 25.6842 227.085 24.1551 234.066 24.1551C242.044 24.1551 248.027 26.0498 252.016 29.8393C256.071 33.6288 258.099 39.18 258.099 46.4931V64.7424C258.099 66.2715 258.332 67.3019 258.797 67.8338C259.329 68.2992 260.093 68.5318 261.091 68.5318H262.587V78.8033C262.121 78.9363 261.357 79.0693 260.293 79.2022C259.296 79.3352 258.298 79.4017 257.301 79.4017C255.174 79.4017 253.179 79.036 251.318 78.3047C249.523 77.5734 248.06 76.3435 246.93 74.615C245.8 72.8199 245.235 70.2936 245.235 67.036L246.531 68.0332C245.866 70.4266 244.67 72.5208 242.941 74.3158C241.279 76.1108 239.085 77.5069 236.359 78.5042C233.7 79.5014 230.609 80 227.085 80ZM230.675 69.7285C233.135 69.7285 235.296 69.2632 237.157 68.3324C239.019 67.3352 240.481 65.9058 241.545 64.0443C242.609 62.1828 243.141 59.9889 243.141 57.4626V54.8698L230.974 57.4626C228.581 57.928 226.753 58.7257 225.49 59.8559C224.293 60.9197 223.695 62.3158 223.695 64.0443C223.695 65.8393 224.293 67.2355 225.49 68.2327C226.686 69.2299 228.415 69.7285 230.675 69.7285Z"
                  fill="currentColor"
                />
                <path
                  d="M146 79.8006V8H161.082V39.3496L186.683 8H204.246L178.348 39.6529L205.834 79.8006H188.668L168.425 49.968L161.082 58.6649V79.8006H146Z"
                  fill="currentColor"
                />
              </svg>
            </Link>
            <p className="text-muted-foreground text-balance text-sm max-w-sm">
              All you need. Nothing you don't.
            </p>
          </div>

          <div className="col-span-3 grid gap-6 sm:grid-cols-3">
            <div className="space-y-4 text-sm">
              <span className="block font-medium">Product</span>
              <div className="flex flex-wrap gap-4 sm:flex-col">
                <Link
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="/docs"
                >
                  <span>Documentation</span>
                </Link>
                <Link
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="/docs"
                >
                  <span>Getting Started</span>
                </Link>
                <Link
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="/docs/roadmap"
                >
                  <span>Roadmap</span>
                </Link>
              </div>
            </div>

            <div className="space-y-4 text-sm">
              <span className="block font-medium">Resources</span>
              <div className="flex flex-wrap gap-4 sm:flex-col">
                <a
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="https://github.com/usekaneo/kaneo"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>GitHub</span>
                </a>
                <a
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="https://github.com/usekaneo/kaneo/blob/main/LICENSE"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>License</span>
                </a>
                <a
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="https://github.com/usekaneo/kaneo/blob/main/CONTRIBUTING.md"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>Contributing</span>
                </a>
              </div>
            </div>

            <div className="space-y-4 text-sm">
              <span className="block font-medium">Community</span>
              <div className="flex flex-wrap gap-4 sm:flex-col">
                <a
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="https://github.com/usekaneo/kaneo"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>GitHub</span>
                </a>
                <a
                  className="text-muted-foreground hover:text-primary block duration-150"
                  href="https://discord.com/invite/rU4tSyhXXU"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>Discord</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
